<template>
    <div class="order-name" v-html="orderStatus" :state="info.order_state" :loading="info.order_state == 2 && info.order_pay_state == 1">
    </div>
</template>
<script>
export default {
    props: { info: { type: Object, require: true, default: () => { } } },
    computed: {

        orderStatus () {

            const info = this.info || {}
            // const code = info.order_state;
            // icon-user-a-Tobeoperated 感叹
            // icon-user-Refund 勾
            // icon-user-a-Inproduction 沙漏
            // icon-user-a-Problemorder 问题


            // 1: 未支付（可转为：11已取消、13待操作、14待操作）
            // 2: 已支付（可转为：12退款订单、15问题订单）
            // 3: 已生成工单（状态显示为正在生产；可转为：12退款订单、15问题订单）
            // 4: 正在生产
            // 5: 生产完成
            // 6: 质检合格
            // 7: 已贴运单（状态显示为已发货）
            // 8: 物流已揽收（状态显示为已发货）
            // 9: 运输中（状态显示为已发货）
            // 10: 已完成
            // 11: 已取消
            // 12: 已退款
            // 13: 待操作-同e步商品(未支付状态)
            // 14: 待操作-地址不可到达(未支付状态)
            // 15: 问题订单

            const all_custom_count = info.all_custom_count
            const code = info.order_state;
            const state = info.order_pay_state

            const status = {
                1: '<em style="color: #ECB000"><i class="iconfont icon-a-Tobeoperated" ></i><b>Unpaid</b></em>',
                2: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>Paid</b></em>',
                3: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>In production</b></em>',
                4: '<em style="color: #1AC4A8"><i class="iconfont icon-dingdanshengchanzhong" ></i><b>In production</b></em>',
                5: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>Production completed</b></em>',
                6: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>Quality checked</b></em>',
                7: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>In transit</b></em>',
                8: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>In transit</b></em>',
                9: '<em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>Delivered</b></em>',
                10: ' <em style="color: #1AC4A8"><i class="iconfont icon-Refund" ></i><b>Complete</b></em>',
                11: ' <em style="color: #666666"><i class="iconfont icon-Refund" ></i><b>Cancelled</b></em>',
                12: ' <em style="color: #666666"><i class="iconfont icon-Refund" ></i><b>Refunded</b></em>',
                13: ' <em style="color: #F65E53"><i class="iconfont icon-a-Tobeoperated" ></i><b>Unsynced</b></em>',
                14: ' <em style="color: #F65E53"><i class="iconfont icon-a-Tobeoperated" ></i><b>Invalid shipping address</b></em>',
                15: ' <em style="color: #F65E53"><i class="iconfont icon-a-Tobeoperated" ></i><b>Suspended</b></em>',
            }[code];


            if (code == 1 && all_custom_count > 0) {
                return '<em style="color: #ECB000"><i class="iconfont icon-a-Tobeoperated" ></i><b>Customization</b></em>'
            } else if (code == 2 && state == 1) {
                // panding
                return '<em style="color:#ECB000;"><i class="iconfont icon-Refund" ></i><b>Pending</b></em>';
            } else if (code == 2 && state == 2) {
                // delayed
                return '<em style="color:#ECB000;"><i class="iconfont icon-Refund" ></i><b>Delayed transaction</b></em>';
            } else if (code == 2 && state == 11) {
                // 退款中
                return '<em style="color:#ECB000;"><i class="iconfont icon-a-Tobeoperated" ></i><b>Refunding</b></em>';
            } else if (code == 2 && (state == 10 || state == 0)) {
                // complete
                return '<em style="color:#1AC4A8;"><i class="iconfont icon-Refund" ></i><b>Paid</b></em>';
            } else if (code == 2 && state == 20) {
                // failed
                return '<em style="color:#F65E53;"><i class="iconfont icon-a-Tobeoperated" ></i><b>Payment failed</b></em>'
            } else {
                return status;
            }
        },

    },
};
</script>
<style lang="scss" scoped>
.order-name {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &::v-deep {
        i {
            font-size: 24px;
            margin-right: 3px;
        }
        b {
            font-weight: normal;
            font-size: 16px;
        }
        em {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    &[loading]::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(@/assets/images/loading.gif);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 3px;
    }

    // <!-- <img src="@/assets/images/loading.gif" v-show="info.loading"> -->
}
</style>
